<template>
	<view :class="['searchBar', {change:changeStyle}, {'sticky': !fixed}]" :style="bgStyle">
		<image v-if="isShowCategoryIcon" @click="goCategory" class="cate-icon" src="https://ss.migudm.cn/malleoc/img/search/ic_nav_cla.png"></image>
		<view class="inputBar flex ac" @click="toSearch">
			<image v-if="!removeMigu" class="barItem logo" src="https://ss.migudm.cn/malleoc/img/index/logo_migu.png" mode=""></image>
			<image v-else class="barItem logo remove-logo" src="https://ss.migudm.cn/malleoc/img/index/remove_migu.png" mode=""></image>
			<image class="barItem searchIcon" src="https://ss.migudm.cn/malleoc/img/index/ic_homepage_search@2x.png" mode=""></image>
			<view class="barItem searchText">{{hotSearchKeyWord}}</view>
		</view>
	</view>
</template>

<script>
export default{
	data() {
		return {
			entrance: this.$globalData.state.entrance,
			hotSearchKeyWord: '搜搜看',
		}
	},
	props: {
		changeStyle: {
			type: Boolean,
			default: false
		},
		fixed: {
			type: Boolean,
			default: true
		},
		bgStyle: {
			type: String,
			default: ''
		},
		groupId: {
			type: String,
			default: ''
		},
		toCourseSearch: {//去课程搜索
			type: Boolean,
			default: false
		},
		isShowCategoryIcon: { // 是否显示分类图标
			type: Number,
			default: 0
		}
	},

	created() {
		if(!this.toCourseSearch){//课程无需搜索热词
			this.$request('search/listHotWords', {limit: 1}).then(data => {
				this.hotSearchKeyWord = data.hotWordList[0] || '搜搜看';
			})
		}else{
			this.hotSearchKeyWord = '搜索课程名称';
		}
	},
	methods:{
		toSearch(){
			var pageUrl = "/package_search/courseSearch?ation=keyboard";
			if(this.toCourseSearch){
				pageUrl = "/package_search/courseSearch?ation=keyboard";
			}else{
				pageUrl = "/package_goods/search/search?ation=keyboard"
			}
			if(this.groupId){
				pageUrl = pageUrl +"&linkValue=" + this.groupId
			}
			this.$routeUtils.navigateTo({
				url:pageUrl
			});
		},
		/**
		 * 去分类
		 */
		goCategory() {
			this.$routeUtils.navigateTo({
				url:`/pages/goods/category`
			});
		}
	}
}
</script>

<style lang="scss" >
	.cate-icon{
		width: 60rpx;
		height: 60rpx;
		margin-right: 24rpx;
	}
	.searchBar{
		position: fixed;  
		width: 100%; 
		height:88rpx; 
		display: flex;
		background:linear-gradient(180deg,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); 
		padding: 12rpx 24rpx; box-sizing: border-box; z-index: 9; text-align: left;
		.inputBar{ background: #fff; height: 62rpx; width: 100%; border-radius: 32rpx;
			.barItem{display: inline-block; vertical-align: -webkit-baseline-middle; line-height: 62rpx;}
			.logo{height:28rpx; width: 84rpx;  margin-left: 20rpx; margin-right: 18rpx;}
			.remove-logo{height: 35rpx;}
			.searchIcon{height:36rpx ; width: 54rpx; padding-left:16rpx; border-left:2rpx solid #e7e7e7; box-sizing: border-box;}
			.searchText{color: #999; font-size: 26rpx; padding-left: 8rpx;}
		}
		&.change{box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
			.inputBar{background: #f4f4f4}

		}
	}
	.sticky{
		position: sticky
	}
</style>
